<template>
	<view>
		<view class="pdl10 pdr10 pdt5 pdb5 bagW">

			<block v-if="type === 'textarea'">
				<view class="pdt20 pdb20">
					<view class="d-flex align-center justify-between">
						<view class="d-flex align-center" :style="titleStyle">
							<view class="point">
								<span v-if="reqiure"></span>
							</view>
							<text class="mgl5 fs16 text-black">{{title}}</text>
						</view>
						<view v-if="maxlength != -1">
							<text class="text-black fs16">{{value ? value.length : 0}}/</text>
							<text class="text-7f fs12">{{maxlength}}</text>
						</view>
					</view>
					<view class="mgl10 mgr10 border pdb5 border-radius-5" :style="{height:textHeight}">
						<textarea  :style="{height:'100%',width:'100%',padding:'5px 0 5px 2px'}"
								   :value="value" :placeholder="placeholder"
								   :maxlength="maxlength"
								   @input="textareaInput"/>
						<view v-if="fail && reqiure" class="bagW">
							<text class="text-red fs12">{{title}}不能为空</text>
						</view>
					</view>
				</view>
			</block>
			<view v-else class='email' :class="fail && reqiure ? 'pdb20' : ''">
				<view class='contont-desc'>
					<view class="point">
						<span v-if="reqiure"></span>
					</view>
					<text class="mgl5 fs16 text-black">{{title}}</text>
				</view>
				<view v-if="type === 'dateTimePicker'" class='invo-view  border-bottom'>
					<input @click="showTimePicker" :value="value" type="text" :disabled="true" :placeholder='placeholder' placeholder-class="text-black">
					<CalendarComp :insert="false" :date="value" ref="calendar" @confirm="confirm"></CalendarComp>
				</view>
				<view v-else-if="type === 'pickerSelect'" class='invo-view   border-bottom'>
					<PickerSelect
						:options="options"
						:valueKey="pickerProps.valueKey"
						:rangeKey="pickerProps.rangeKey"
						:value="value"
						@change="change"/>
				</view>
				<view  v-else class='invo-view   border-bottom'>
					<input :type="type" @input="inputChange" :value="value" :placeholder='placeholder' placeholder-class="text-black">
				</view>
				<view v-if="fail && reqiure" class="bagW">
					<text class="text-red fs12">{{title}}不能为空</text>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import PickerSelect from "../picker-select-comp/picker-select-comp.vue"
	import CalendarComp from "../calendar-comp/calendar-comp.vue"
	import isArray from "lodash/isArray"
	import isFunction from "lodash/isFunction"
	export default {
		components:{
			PickerSelect,
			CalendarComp,
		},
		props:{
			defaultValue:{
				type:[String, Object, Number],
				default:""
			},
			// title
			title:{
				type:String,
				default:""
			},
			//输入类型
			type:{
				type:String,
				default:"text"// text,textarea, dateTimePicker, pickerSelect, digit
			},
			//占位符
			placeholder:{
				type:String,
				default:'请输入'
			},
			//字符最大长度 -1 不限字符长度
			maxlength:{
				type:[String, Number],
				default:'100'
			},
			// textarea 高度
			textHeight:{
				type:String,
				default:'80px'
			},
			// 必填
			reqiure:{
				type:Boolean,
				default:false,
			},
			//报错
			fail:{
				type:Boolean,
				default:false,
			},
			//输入、选择后回调
			onChange:{
				type:Function,
				default:null
			},
			//额外参数
			params:{
				type:[Object,String, Number, Function],
				default:null
			},
			//下拉选择框参数
			pickerProps:{
				type:Object,
				default:()=>{
					return {
						valueKey:'id',
						rangeKey:'name'
					}
				},
			},
			titleStyle:{
				type:String,
				default:''
			},

		},
		watch:{
			defaultValue(newValue){
				console.log('newValue',newValue)
				this.value = newValue;
			}
		},
		created(){

			if(this.type === 'pickerSelect'){
				this.fetchList()
			}
			this.value = this.defaultValue;
		},
		data(){
			return {
				value:'',//选择的值
				showTime:false,
				options:[],
			}
		},
		methods:{
			//显示时间
			showTimePicker(){
				console.log("ddd",this.$refs.calendar)
				this.showTime = true;
				this.$refs.calendar.open();
			},
			//选择时间回调
			confirm(e) {
				console.log(e);
				this.value = e.fulldate;
				this.valueChange();
			},
			// 多行输入
			textareaInput(values){
				let {target:{value}} = values;
				this.value = value;
				this.valueChange();
			},
			// input输入
			inputChange(values){
				let {target:{value}} = values;
				this.value = value;
				this.valueChange();
			},
			valueChange(){
				let ob = {
					value:this.value
				};
				if(!this.value && this.reqiure){
					ob.fail = true;
				}else{
					ob.fail = false;
				}
				this.$emit('onChange',ob)
			},
			change(values){
				let { value } = values;
				this.value = value;
				this.valueChange();
			},
			fetchList(){
				console.log('title',this.title,this.params)
				if(this.params){
					let { api } = this.params;
					if(this.config && isFunction(this.config.reqGet)){
						this.config.reqGet(api,{}).then(res=>{
							if(res && res.data.status == 200){
								let data = res.data.data;
								let records = [];
								if(isArray(data)){
									records = data;
								}else
									records = isArray(data.records) ? data.records : (isArray(data.results) ? data.results : []);

								this.options = records;
							}
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../common/common.scss";
	.border{
		border:2upx solid #ddd;
	}
	.email {
		width: 100%;
		height: 150upx;
		line-height: 70upx;
		// padding: 20upx 0;
	}
	.email input {
		width: 90%;
		padding: 0 0 0 20upx !important;
	}
	.contont-desc {
		display: flex;
		align-items: center;
		width: 100%;
		font-size: 32upx;
		color: #4A4A4A;
		line-height: 70upx;
		height: 70upx;
		/* #ifdef APP-PLUS */
		font-size: 36upx;
		/* #endif */
	}
	.invo-view {
		width: 100%;
		height: 70upx;
	}
	.point{
		height: 10upx;
		width: 10upx;
		span{
			background-color: #4151AA;
			display: block;
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}
</style>
